import React, { Component } from 'react';
import { render } from 'react-dom';
import {Link} from 'react-router-dom';
require('../public/css/mycss.css');
export default class Messagelist extends React.Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            msg: [],
            localMsg:[], //---------------------------存储父组件传递的数据
        }
        this.deleteMsg=this.deleteMsg.bind(this);
        this.deleItem=this.deleItem.bind(this);
        this.getMsg=this.getMsg.bind(this);
    }
    getMsg(){
        $.get(this.props.source).then((result) => {
                if(result.status===200)
                {
                    let temp=this.props.items!==undefined?this.props.items:null;
                    this.setState({msg:result.msg,localMsg:temp});
                }else {
                    alert("获取失败！")
                }
                //console.log("获取留言",result)//------------------------------------------------
            },
            (error) => {
                // console.log(error);
            }
        )
    }
    componentDidMount() {
            this.getMsg();
    }
    deleItem(arr,id){//---------------------删除数组arr(留言列表)中的指定留言
        if(arr) {
            arr.map((item, index)=> {
                if (item._id === id||item.id===id) {//----------item._id(数据是后台获取的)|item.id 数据是父组件传递的
                    // console.log("删除的msgid为", index, id);
                    arr.splice(index, 1);
                }
            })
            return arr;
        }
    }
    deleteMsg(id,type){//---------------------type=1,用户主页 数据为父组件传递的值
        if(id){
            if (confirm("是否删除留言？")) {
                $.post("/delmessage",{
                    msgId:id,
                }).then((result) => {
                        if(result.status===200)
                        {
                            alert("删除成功！")
                        }else {
                            alert("删除失败！")
                        }
                        let newState= type===1?this.deleItem(this.state.localMsg,id):this.deleItem(this.state.msg,id);
                       if(type===1){
                          // console.log("local",newState);//----------------------------是否为父组件传递的变量
                           this.setState({localMsg:newState});
                       }else{
                           this.setState({msg:newState});
                       }
                        // console.log(result)
                    },
                    (error) => {
                        // console.log(error);
                    }
                )
            }
            else {
                alert("取消删除！");
            }
        }else{
            alert("删除失败！");
        }
    }
    render(){
        let linkpath=(path)=><Link  to={`/edit/${this.props.myname}/${path}`}><img className="imgicon" src="/imgs/edit.png" alt="" /></Link>
        let imgpath=(path)=>`/imgs/${path}.jpg`;
        let temp=this.props.type===1;//判断是否为用户主页
        linkpath=temp?linkpath:null; //linkpath 在用户主页下显示 删除的png图片，否则不显示
        return <div>
            <ul className="msglist">
                {this.state.localMsg?this.state.localMsg.map((item,index)=>
                    <li key={index}>
                        <img className="userimg" src={imgpath(this.props.images)} alt="" />
                        {linkpath(item.id)}
                        <img className="imgicon" src="/imgs/del.png" alt="" onClick={this.deleteMsg.bind(this,item.id,1)}/>
                        <div>
                            <p >用户名：{this.props.myname}</p>
                            <p className="username">内容：{item.msg}</p>
                        </div>
                    </li>
                ):null}
                {this.state.msg.map((item,index)=>
                    <li key={index}>
                        <img className="userimg" src={imgpath(item.userId.images)} alt="" />
                        {temp?linkpath(item._id):linkpath}
                        {temp?<img className="imgicon"  src="/imgs/del.png" alt="" onClick={this.deleteMsg.bind(this,item._id)}/>:null}
                        <div>
                                <p >用户名：{item.userId.username}</p>
                                <p className="username">内容：{item.message}</p>
                        </div>
                    </li>
                )}
            </ul>
        </div>
    }
}
